<template>
  <div class="chart-container">
    <div class="panel-container">
      <div class="panel-content">
        <div class="panel-line space-between">
          <div class="panel-title">{{ title }}</div>
          <div class="icon-box">
            <svg-icon
              v-if="childId.length > 0"
              @click="handleBack"
              icon-class="back"
              class="icon"
            ></svg-icon>
            <svg-icon
              v-if="typeList.includes('pie')"
              @click="handleChange('pie')"
              :icon-class="type === 'pie' ? 'pieChartActive' : 'pieChart'"
              class="icon"
              :class="{ active: type === 'pie' }"
            ></svg-icon>
            <svg-icon
              v-if="typeList.includes('bar')"
              @click="handleChange('bar')"
              :icon-class="type === 'bar' ? 'barChartActive' : 'barChart'"
              class="icon"
              :class="{ active: type === 'bar' }"
            ></svg-icon>
            <svg-icon
              v-if="typeList.includes('line')"
              @click="handleChange('line')"
              :icon-class="type === 'line' ? 'lineChartActive' : 'lineChart'"
              class="icon"
              :class="{ active: type === 'line' }"
            ></svg-icon>
          </div>
        </div>
        <div
          class="chart-box"
          v-if="data && data.key && data.key.length > 0"
        >
          <el-row :gutter="10">
            <el-col :span="16">
              <PieChart
                v-if="type === 'pie' && chartDataPie"
                :chartData="chartDataPie"
                :height="height"
                @click="handleClick"
              />
              <BarChart
                v-if="type === 'bar' && chartDataLine"
                :chartData="chartDataLine"
                :height="height"
                @click="handleClick"
              />
              <LineChart
                v-if="type === 'line' && chartDataLine"
                :chartData="chartDataLine"
                :height="height"
                @click="handleClick"
              />
            </el-col>
            <el-col :span="8">
              <slot
                name="data"
                :data="data"
              ></slot>
              <div
                class="list"
                v-if="data"
              >
                <div
                  class="item"
                  :class="{
                    w100: data.key.length < 16,
                    'has-child': getChildId(item)
                  }"
                  v-for="(item, index) in data.key"
                  :key="item + index"
                  @click="handleTextClick(item)"
                >
                  <div class="title">{{ item }}</div>
                  <div class="num">{{ data.val[index] }}</div>
                </div>
                <div
                  class="item total"
                  v-if="data.total_num"
                  :class="{ w100: data.key.length < 16 }"
                >
                  <div class="title">合计</div>
                  <div class="num">{{ data.total_num }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-empty
          v-else
          style="height: 400px"
        ></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from '@/components/ECharts/PieChart.vue'
import LineChart from '@/components/ECharts/LineChart.vue'
import BarChart from '@/components/ECharts/BarChart.vue'

export default {
  name: 'PanelChart',
  components: { PieChart, LineChart, BarChart },
  props: {
    time: Object,
    chartType: String,
    title: String,
    api: Function,
    param: String,
    addParam: Object,
    typeList: {
      type: Array,
      default: () => {
        return ['pie', 'bar', 'line']
      }
    }
  },
  data() {
    return {
      childId: [],
      type: 'pie',
      height: '400px',
      data: null,
      chartDataLine: null,
      chartDataPie: null
    }
  },
  watch: {
    time: function () {
      this.childId = []
      this.getData()
    }
  },
  mounted() {
    if (this.chartType) {
      this.type = this.chartType
    }
  },
  destroyed() {},
  methods: {
    //  获取数据
    getData() {
      let apiData = { ...this.time, ...this.addParam }
      const length = this.childId.length
      const id = this.childId[length - 1]
      if (id) {
        apiData[this.param] = id
      }
      this.api(apiData).then((res) => {
        this.data = res.info
        this.setChartsData(this.data)
      })
    },
    // 点击进入下一级
    handleClick(param) {
      let id = this.getChildId(param.name)
      if (id) {
        this.childId.push(id)
        this.getData()
      } else {
        this.$message('暂无下一级数据')
      }
    },
    // 点击文字
    handleTextClick(item) {
      this.handleClick({ name: item })
    },
    // 返回上一级
    handleBack() {
      this.childId.pop()
      this.getData()
    },
    getChildId(name) {
      let index = -1
      let id = ''
      const { key, if_have_second, ids } = this.data
      if (if_have_second && if_have_second.length > 0) {
        index = key.findIndex((item) => item === name)
        if (index > -1) {
          if (if_have_second[index] === 1) {
            id = ids[index]
          }
        }
      }
      return id
    },
    handleChange(type) {
      this.type = type
    },
    setChartsData(data) {
      if (data.key && data.key.length > 0) {
        this.chartDataLine = {
          xAxis: data.key,
          series: [
            {
              name: '',
              data: data.val
            }
          ]
        }
        const seriesData = data.key.map((item, index) => {
          return {
            name: item,
            value: data.val[index]
          }
        })
        this.chartDataPie = {
          series: [
            {
              name: '',
              data: seriesData
            }
          ]
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.page-content {
  padding-top: 62px;
}
.panel-line {
  align-items: flex-start;
}

.panel-list {
  width: 100%;
}
.panel-item {
  width: 80%;
  margin-bottom: 16px;
  .line1 {
    margin-bottom: 6px;
  }
  .text-index {
    margin-right: 20px;
  }
  .bar {
    width: 80%;
    height: 10px;
    .inner {
      width: 50%;
      height: 100%;
      background: #5db42c;
      border-radius: 0 5px 5px 0;
      opacity: 0.8;
    }
  }
}
.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.icon {
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  opacity: 0.5;
  &:hover {
    opacity: 1;
  }
  &.active {
    opacity: 1;
  }
}
.list {
  font-size: 12px;
  line-height: 2;
  color: #999;
  max-height: 400px;
  overflow: hidden;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  .item {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    &.w100 {
      width: 100%;
    }
    &:hover {
      font-weight: bold;
      color: #666;
    }
    &.has-child {
      cursor: pointer;
      &:hover {
        color: #5db42c;
      }
    }
  }
  .total {
    font-weight: bold;
    color: #666;
    cursor: default;
  }
}
</style>
